<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">动态详情</view>
		</view>
		<view class="main-content">
			<view class="content">
				<view class="activity-card">
					<view class="user-info">
						<view class="avatar" :style="'--icon: url(' + userIcon + ')'"></view>
						<view class="meta">
							<view class="username">{{ username }}</view>
							<view class="time">{{ time }}</view>
						</view>
					</view>
					<view class="activity-content">
						<view class="title">{{ title }}</view>
						<view class="description">{{ content }}</view>
						<view class="photo-list" v-if="imgList.length">
							<view class="photo" v-for="imgItem in imgList" :key="imgItem.id" :style="'--photo: url(' + imgItem.url + ')'"></view>
						</view>
						<view class="tags">
							<view class="tag" :style="`--c: ${circlePostTypeTextColor}; --bg: ${circlePostTypeBgColor};`" v-if="circlePostType">{{ circlePostType }}</view>
						</view>
					</view>
					<view class="meta">
						<view class="stats">
							<view class="stat-item" @click.stop="clickLikeBtn(isLike)" :style="`--icon: url(${ base_url }/static/img/${isLike ? 'islike' : 'noislike'}.svg)`">
								<view>{{ likeCount }}</view>
							</view>
							<view class="stat-item" :style="`--icon: url(${ base_url }/static/img/comment.svg)`">
								<view>{{ commentCount }}</view>
							</view>
						</view>
						<view class="time">{{ time }}</view>
					</view>
				</view>
				<view class="comments-section">
					<view class="section-title">评论 ({{ commentCount }})</view>
					<view class="comment-list">
						<view class="comment-item" v-for="item in commentList" :key="item.id">
							<view class="comment-avatar" :style="`--icon: url(${ item.userIcon })`"></view>
							<view class="comment-content">
								<view class="comment-header">
									<text class="comment-username">{{ item.username }}</text>
									<text class="comment-time">{{ item.time }}</text>
								</view>
								<text class="comment-text">{{ item.content }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="comment-input">
				<input type="text" v-model="myComment" placeholder="写下你的评论...">
				<view class="send-btn" @click="addCommentPost">发布评论</view>
			</view>
		</view>
	</view>
</template>

<script>
// 服务层
import { circlePost } from '../../server/circlePost';
import { base_url } from '../../server/config';

// 工具层
import { formatTimeToText } from '../../util/tool';
import { formatTime } from '../../util/tool';

// 业务层
import { getUserIcon, getCirclePostImgUrl } from '../../service/file';

export default {
	data() {
		return {
			base_url,
			id: "",
			username: "",
			userIcon: "",
			time: "",
			title: "",
			content: "",
			imgList: [],
			circlePostType: "",
			circlePostTypeTextColor: "",
			circlePostTypeBgColor: "",
			likeCount: 0,
			commentCount: 0,
			isLike: false,
			commentList: [],
			myComment: ""
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
		clickLikeBtn(isLike) {
			// 获取id值
			const postId = this.id;
			// 抽取公共函数部分
			let tmp_function = isLike ? circlePost.nolikePost : circlePost.likePost;
			let ok_msg = isLike ? '取消点赞成功' : '点赞成功';
			let no_msg = isLike ? '取消点赞失败' : '点赞失败';
			// 点赞 或 取消点赞
			tmp_function(postId).then((res) => {
				if (res.success) {
					// 通知父组件
					uni.showToast({
						title: ok_msg,
						icon: 'none'
					});
					// 这里太粗暴了，后续优化！！！！！！！！！！！！！！！！！
					getPostInfo(this);
				} else {
					uni.showToast({
						title: no_msg,
						icon: 'none'
					});
				}
			}).catch((err) => {
				uni.showToast({
					title: '请检查网络',
					icon: 'none'
				});
			});
		},
		addCommentPost() {
			let postId = this.id;
			let myComment = this.myComment;
			let time = formatTime(new Date());
			circlePost.addCommentPost(postId, time, myComment).then((res) => {
				if (res.success) {
					this.myComment = '';
					// 这里也太过于暴力了，后续优化！！！！！！！！！！！！！！！！！！！！！！！！！
					getPostInfo(this);
					getPostCommentList(this);
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			}).catch((err) => {
				uni.showToast({
					title: '请检查网络',
					icon: 'none'
				});
			});
		}
	},
	onLoad(e) {
		this.id = e.id;
		getPostInfo(this);
		getPostCommentList(this);
	}
}

async function getPostInfo(self) {
	circlePost.getPostInfo(self.id).then(async (res) => {
        if (res.success) {
			let imgIdList = JSON.parse(res.post.imgIdList);
			let imgList = [];
			for (let j = 0; j < imgIdList.length; j++) {
				let imgId = imgIdList[j];
				imgList.push({ id: imgId, url: await getCirclePostImgUrl(imgId)});
			}
			self.username = res.post.username;
			self.userIcon = await getUserIcon(res.post.userIcon);
			self.time = formatTimeToText(res.post.publishTime);
			self.title = res.post.title;
			self.content = res.post.content;
			self.imgList = imgList;
			self.circlePostType = res.post.circlePostType;
			self.circlePostTypeTextColor = res.post.circlePostTypeTextColor;
			self.circlePostTypeBgColor = res.post.circlePostTypeBgColor;
			self.likeCount = res.post.likeCount;
			self.commentCount = res.post.commentCount;
			self.isLike = res.post.isLike;
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		}
	}).catch((err) => {
		uni.showToast({
			icon: 'error',
			title: '请检查网络'
		});
	});
}

async function getPostCommentList(self) {
	let commentList = [];
	circlePost.getPostCommentList(self.id).then(async (res) => {
		if (res.success) {
			let data = res.data;
			for (let i = 0; i < data.length; i++) {
				let item = data[i];
				let tmp = {
					id: item.id,
					username: item.username,
					userIcon: await getUserIcon(item.userIcon),
					content: item.content,
					time: formatTimeToText(item.time),
				};
				commentList.push(tmp);
			}
			self.commentList = commentList;
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		}
	}).catch((err) => {
		uni.showToast({
			icon: 'error',
			title: '请检查网络'
		});
	});
}

</script>

<style>
.main-content {
	background-color: #f5f5f5;
	padding-bottom: 35vmin;
}

.content {
	max-width: 150vmin;
	margin: 0 auto;
	padding: 5vmin 0;
}

.activity-card {
	background: #fff;
	border-radius: 3vmin;
	padding: 4vmin;
	margin-bottom: 4vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000d;
}

.user-info {
	display: flex;
	align-items: center;
	gap: 3vmin;
	margin-bottom: 4vmin;
}

.avatar {
	--size: 12vmin;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
    background-image: var(--icon);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    overflow: hidden;
}

.meta {
	flex: 1;
}

.username {
	font-size: 4vmin;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 1vmin;
}

.time {
	font-size: 3.5vmin;
	color: #999;
}

.activity-content {
	margin-bottom: 4vmin;
}

.title {
	font-size: 4.5vmin;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 2vmin;
	overflow: hidden;
    word-wrap: break-word;
    color: #333;
    transition: all .3s ease;
}

.description {
	font-size: 3.75vmin;
	color: var(--text-secondary);
	line-height: 1.6;
	margin-bottom: 4vmin;
	white-space: pre-wrap;
	overflow: hidden;
    word-wrap: break-word;
    transition: all .3s ease;
}

.tags {
	display: flex;
	gap: 2vmin;
}

.category {
	background: #e8f5e9;
	color: #2e7d32;
}

.location {
	background: #e3f2fd;
	color: #1976d2;
}

.photo {
	width: 50vmin;
	height: 50vmin;
	border-radius: 2vmin;
	overflow: hidden;
	background-color: #888a;
    background-image: var(--photo);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 3vmin;
	margin: auto
}

.tag {
    align-items: center;
    margin: 1vmin;
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
    background-color: var(--bg);
	margin-bottom: 3vmin;
    color: var(--c);
	transition: all .3s ease;
}

.meta {
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stats {
	display: flex;
    gap: 4vmin;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
    color: #999;
	font-size: 3.5vmin;
}

.stat-item::before {
    --size: 5vmin;
	content: "";
	display: block;
	width: var(--size);
	height: var(--size);
    background-image: var(--icon);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.time {
    font-size: 3vmin;
    color: #999;
}

.activity-actions {
	display: flex;
	gap: 4vmin;
	padding-top: 3vmin;
	border-top: 0.25vmin solid var(--border-color);
}

.action-btn {
	display: flex;
	align-items: center;
	gap: 1.5vmin;
	padding: 2vmin;
	border: none;
	background: none;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all .2s;
}

.action-icon {
	width: 5vmin;
	height: 5vmin;
}

.action-btn.active {
	color: var(--primary-color);
}

.comments-section {
	background: #fff;
	border-radius: 3vmin;
	padding: 4vmin;
	box-shadow: 0 0.5vmin 2px #0000000d;
}

.section-title {
	font-size: 4vmin;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 4vmin;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 4vmin;
}

.comment-item {
	display: flex;
	gap: 4vmin;
}

.content-image {
	width: 100%;
	border-radius: 2vmin;
	margin-bottom: 4vmin;
}

.comment-avatar {
	--size: 9vmin;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background-image: var(--icon);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    overflow: hidden;
}

.comment-content {
	flex: 1;
	overflow: hidden;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1vmin;
}

.comment-text {
	font-size: 3.5vmin;
	color: var(--text-secondary);
	line-height: 1.5;
	word-wrap: break-word;
}

.comment-username {
	font-size: 3.5vmin;
	font-weight: 500;
	color: var(--text-primary);
	max-width: 50vmin;
	text-overflow: ellipsis;
	overflow: hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.comment-time {
	font-size: 3vmin;
	color: #999;
}

.comment-text {
	font-size: 3.5vmin;
	color: var(--text-secondary);
	line-height: 1.5;
}

.comment-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 3vmin;
    padding: 3vmin 4vmin;
	padding-bottom: 10vmin;
    background: #fff;
    border-top: 0.25vmin solid var(--border-color);
}

.comment-input input {
    flex: 1;
    padding: 2vmin 4vmin;
    border: 0.25vmin solid var(--border-color);
    border-radius: 5vmin;
    font-size: 3.5vmin;
    background: #f5f5f5;
}

.send-btn {
	--h: 9vmin;
	width: 20vmin;
    height: var(--h);
    border: none;
    line-height: var(--h);
    font-weight: 900;
    border-radius: 4.5vmin;
    background: rgb(7, 193, 96);
    color: #fff;
    transition: all .2s;
	text-align: center;
	font-size: 3.5vmin;
}
.star-comment {
	font-size: 3.5vmin;
}
</style>